<template>
    <div class="acticles">
       <ol>
           <li v-for="(count,index) in newArr" :key="index">
               <router-link to="/pcnovel">
                   <div class="noveList" 
                   v-for="item in arr" v-bind:key="item.date">
                       <div class="nove_top">
                           <div class="nove_img">
                               <img :src="item.imgurl" alt="">
                           </div>
                           <div class="nove_progress">
                               <span># 已完结</span>
                           </div>
                           <div class="nove_title">
                               <span>{{item.date}}</span>
                           </div>
                       </div>
                       <div class="nove_bottom">
                           <span>{{item.word}}</span>
                           <span>文 / 小白</span>
                       </div>
                   </div>
               </router-link>
           </li>
       </ol>
       <ul>
           <li></li>
       </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr : [],
            newArr : [],
        }
    },
    methods : {
        addList(){
            let lis = document.querySelector("ol li");
            for(var i = 0;i < 10;i ++){
                this.newArr.push(lis);
            }
            
        }
    },
    created(){
        let url = `http://api.tianapi.com/one/index?key=4edfc8b0eaf529289efb9d44fc7474c8&rand=`;
        let pro = axios.get(url);
        let _this = this;
        pro.then(
            response => {
                let res = response.data.newslist;
                // console.log(res);
                _this.arr = res;
                // console.log(_this.arr);
            },
            error => {
                console.log(error);
            }
        )
    },
    mounted(){
        this.addList();
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";
@import "../assets/common/variable.scss";
ol{
    height: 605px;
    overflow-y: scroll;
}
.noveList{
    width: 335px;
    height: 250px;
    margin: 20px auto 0px;
    background: #fff;
    border-radius: $circle;
    .nove_top{
        height: 200px;
        border-top-right-radius: $circle;
        border-top-left-radius: $circle;
        background: #c2e9fb;
        position: relative;
        .nove_img{
            width: 335px;
            height: 200px;
            position: absolute;
            img{
                width: 100%;
                height: 100%;
                display: block;
                border-top-right-radius: $circle;
                border-top-left-radius: $circle;
            }
        }
        .nove_progress{
            width: 60px;
            height: 20px;
            position: absolute;
            border-radius: 20px;
            color: #fff;
            font-size: 12px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .nove_title{
            width: 300px;
            height: 40px;
            position: absolute;
            margin-top: 160px;
            color: #fff;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .nove_bottom{
        height: 50px;
        font-size: 18px;
        // background: chartreuse;
        border-bottom-right-radius: $circle;
        border-bottom-left-radius: $circle;
        span{
            display: block;
            padding-left: 15px;
            &:first-child{
                color:#a6a6a6;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &:last-child{
                color:#cbcbcb;
                font-size: 12px;
            }
        }
    }
}
</style>
